// 主入口文件
import Vue from "vue"; // 导入必要的依赖：Vue核心库
import Vuex from "vuex"; // 导入必要的依赖：Vuex状态管理库
import user from "./modules/user"; // user：用户模块（单独拆分的模块化状态）

Vue.use(Vuex);
// 2.注册Vuex插件
// 这行代码让 Vue 应用可以使用 Vuex 提供的功能
// 相当于告诉Vue：“我要使用Vuex 了”

export default new Vuex.Store({
  // 3.创建并到处 Vuex Store 实例
  // 这是整个应用的状态管理中心
  // 包含一下几个核心部分：

  state: {
    // 4.根级状态定义
    // 相当于组件中的 data，但这里是全局共享的
    loading: false, // 示例：全局加载状态
  },
  mutations: {
    // 5.根级mutations
    // 唯一可以修改 state 的地方（同步操作）
    SET_LOADING(state, payload) {
      // mutation 接收 state 作为第一个参数
      // payload 是提交 mutation 时传入的额外参数
      state.loading = payload; // 修改 loading 状态
    },
    // 调用方式：store.commit(‘SET_LOADING’,true)
  },
  actions: {
    // 6. 根级actions
    // 处理异步操作，可以包含任意异步操作
    // 最终通过 commit mutation 来修改 state)
  },
  getters: {
    // 7.根级getters
    // 相当于 store 的计算属性
    // 可以从 state 派生出新数据
  },
  modules: {
    // 8.模块化状态
    // 将 store 分隔成模块，每个模块拥有自己的 state/mutaions/actions/getters
    // 访问方式：store.state.user(模块状态)
    // 调用方式：stor.commit('user/MODULENAME')
  },
});

/* 
Vuex 数据流图解：组件 → (dispatch) Actions → (commit) Mutations → (mutate) State → 组件
1.组件通过dispatch调用action
2.Action中可以执行异步操作，然后commit mutation
3.Mutation 实际修改state（必须是同步操作）
4.State变化后自动更新依赖它的组件

Vuex的核心作用
Vuex 是Vue.js的状态管理库，它解决了在大型Vue应用中组件间共享状态问题。主要用途包括：
1.集中管理应用状态：所有组间共享的数据统一存储在一个地方
2.规范状态变更流程：通过严格的流程修改状态，使状态变化可追踪
3.解决组件通信难题：不通层级的组件可以轻松访问和修改同一状态
4.持久化重要数据：可以方便地与本地存储结合，保存用户会话等重要信息
*/
